<template>
    <div id="app">
        <!-- 头部搜索 start -->
        <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
            <TopBar v-if=" !$route.meta.hideTop " />
        </transition>
        <!-- 头部搜索 end -->
        <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft">
            <keep-alive exclude="search,detail,cart">
                <router-view />
            </keep-alive>
        </transition>
        <!-- 底部导航 start -->
        <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
            <BottomBar v-if=" !$route.meta.hideBottom " />
        </transition>
        <!-- 底部导航 end -->
        <!-- 菜单导航  start -->
        <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
            <FiexdMenus v-if="$route.meta.showFixedMenus" />
        </transition>
        <!-- 菜单导航  end -->
    </div>
</template>

<script>
import TopBar from "./components/TopBar";
import BottomBar from "./components/BottomBar";
import FiexdMenus from "./components/FiexdMenus";
export default {
    data() {
        return {
            app:"appdata数据"
        }
    },
    components: {
        TopBar,
        BottomBar,
        FiexdMenus
    },
    // provide(){
    //     return {
    //         app:"app数据",
    //         This:this
    //     }
    // }
};
</script>

<style lang="less" scoped>
#app {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    overflow: hidden;
}
</style>



